<template>
  <div class="center_bottom">
    <Echart
      :options="options"
      id="bottomRightChart"
      class="echarts_bottom"
    ></Echart>
  </div>
</template>

<script>
import { currentGET } from "api";
import { graphic } from "echarts";
export default {
  data() {
    return {
      options: {},
    };
  },
  props: {},
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.pageflag = true;
      currentGET("big6", { companyName: this.companyName }).then((res) => {
        console.log("安装计划", res);
        if (res.success) {
          this.init(res.data);
        } else {
          this.pageflag = false;
          this.$Message({
            text: res.msg,
            type: "warning",
          });
        }
      });
    },
    init(newData) {
      var sData = [{
          name: "靖远县(m³)",
          value: "22",
          number: 73.12
      }, {
          name: "景泰县(m³)",
          value: "34",
          number: 54.22
      }, {
          name: "白银县(m³)",
          value: "47",
          number: 48.18
      }];

      this.options = {
          legend: {
              orient: 'vertical',
              icon: 'roundRect',
              left: '60%',
              align: 'left',
              top: 'center',
              itemGap: 20,
              itemWidth: 6,
              itemHeight: 50,
              borderRadius: 8,
              itemStyle: {
                color: graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#3fe7ee',
                    },
                    {
                      offset: 1,
                      color: "#4980fe" 
                    },
                  ]),
              },
              formatter: function (name) {
                let item = sData.find(v => v.name == name) || {};
                return `{a| ${name}\n}{b0|${item.number}}{b1|${item.value}%}`;
              },
              textStyle: {
                  rich: {
                    a: {
                        color: '#9aa8b5',
                        fontSize: 14,
                        padding: [0, 0, 10, 0],
                    },
                    b0: {
                        color: '#ffffff',
                        fontSize: 24,
                        fontWeight: 500,
                        // padding: [0, 30, 8, 4],
                    },
                    b1: {
                        color: '#fff',
                        fontSize: 14,
                        padding: [0, 0, 0, 20],
                    }
                },
              },
              // data: ['靖远县', '景泰县', '白银区']
          },
          series: [{
              name: '',
              type: 'pie',
              z: 0,
              center: ['35%', '50%'],
              radius: ['0', '50%'],
              hoverAnimation: false,
              itemStyle: {
                color: 'rgba(0,0,0,0)'
              },
              label: {
                show: true,
                color: '#fff',
                fontSize: 24,
                position: 'center',
                align: 'center',
                // formatter: '{用水总量|{b}}\n{per|{d}}{font|%}',
                formatter: '用水总量\n73.12',
                lineHeight: 36
              },
              data: [100]
            },
            
            {
              name: '第一层环',
              type: 'pie',
              z: 3,
              tooltip: {
                  show: true
              },
              center: ['35%', '50%'],
              radius: ['52%', '60%'],
              hoverAnimation: false,
              clockWise: false,
              itemStyle: {
                  color: '#1e829d',
                  borderColor: '#032444',
                  borderWidth: 1
              },
              label: {
                  show: false
              },
              data: sData
          }, {
              name: '第二层环',
              type: 'pie',
              z: 2,
              tooltip: {
                  show: true
              },
              center: ['35%', '50%'],
              radius: ['60%', '68%'],
              hoverAnimation: false,
              clockWise: false,
              itemStyle: {
                  color: '#2ba9c3',
                  borderColor: '#032444',
                  borderWidth: 1
              },
              label: {
                  show: false
              },
              data: sData
          }, {
              name: '第三层环',
              type: 'pie',
              z: 1,
              tooltip: {
                  show: false
              },
              center: ['35%', '50%'],
              radius: ['68%', '76%'],
              hoverAnimation: false,
              // clockWise: false,
              itemStyle: {
                normal: {
                  color: graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#3fe7ee',
                    },
                    {
                      offset: 1,
                      color: "#ab49fe" 
                    },
                  ]),
                },
                borderColor: '#032444',
                borderWidth: 2
              },
              label: {
                show: true,
                color: '#fff',
                fontSize: 16,
                position: 'outside',
                formatter: '{c}%',
              },
              labelLine: {
                  show: true,
                  normal: {
                      align: 'right',
                      lineStyle: {
                          width: 1,
                          color: '#acddf6',
                      },
                  },
              },
              data: sData
          }
        ]
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.center_bottom {
  width: 100%;
  height: 100%;

  .echarts_bottom {
    width: 100%;
    height: 100%;
  }
}
</style>
